<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>博客作业</title>
    <style>
        htm,body{
            padding: 0;
            margin: 0;
            font-size: 10px;
            font-family: "宋体";
        }
        .header{
            background-image: url("image/da.jpg");
            background-repeat: no-repeat;
            background-size: contain;
            background-size: cover;
            height: 30rem;
            color: #fff;
        }
        .header h2{
            font-size: 1.2rem;
            color: #fff;
            padding-top:3.5rem; 
            padding-left: 8rem;
            float: left;
        }
        .header ul{
            list-style: none;
            float: right;
            padding-top: 4rem;
            padding-right: 5rem;
            font-size: 1.2rem;
        }
        .header ul li{
            float: left;
            padding-right: 3rem;
            
        }
        .header h1{
            clear: both;
            color: #000;
            padding-left: 42%;
            padding-top: 5%;
            font-size: 3rem;
            font-weight: 900;
        }
        .header span{
            clear: both;
            color: #000;
            padding-left: 46%;
            font-size: 1.2rem;
        }
        .conter{
            width: 35rem;
            margin: 0 auto;
        }
        .conter h1{
            font-size: 1.6rem;
        }
        .conter p{
            font-size: 1.2rem;
            line-height: 2rem;
        }
        .conter span{
            font-size: 1.2rem;
            font-style: italic;
        }
        .main{
            width: 35rem;
            margin: 0 auto;
           
        }
        .main span{
             border: 1px solid #666;
             width: 5rem;
             height: 2rem;
             float: right;
             color: red;
             font-size: 1.6;
             line-height: 2rem;
             text-align: center;
        }
        .clearfix::after{
            display: block;
            content: "";
            clear: both;
        }
        .footer{
            width: 18rem;
            margin: 0 auto;
        }
        .footer img{
            width: 4rem;
            height: 4rem;
            float: left;
            padding: 1rem;
        }
        .footer p{
            font-size: 1.4rem;
            line-height: 2rem;
            padding-left: 1rem;
        }
    </style>
</head>
<body>
    <div class="header">
        <h2>标题</h2>
        <ul>
            <li>主页</li>
            <li>关于</li>
            <li>归档</li>
            <li>联系</li>
        </ul>
        <h1>生活在别处</h1>
        <span>欢迎来到我的博客</span>
    </div>
    <div class="conter">
        <h1>一个人的牛肉可能是另一个人的草</h1>
        <p>非诚勿扰里乐嘉老师曾发过一段微博，大意是说乐嘉老师自己初恋的时候，有一个姑娘很爱他，那时候乐嘉人又穷，又桀骜，又倔又愤，就觉得你爱我你就应该怎样怎样的证明，最后有一天，姑娘终于跑掉了，确实跟了个有钱人，于是乐嘉就又觉得姑娘是因为嫌贫爱富，着实的去跟姑娘纠缠闹腾了一阵子。</p>
        <span>作者：文by林夕</span>
        <hr/>
    </div>
    <div class="conter">
        <h1>一个人的牛肉可能是另一个人的草</h1>
        <p>非诚勿扰里乐嘉老师曾发过一段微博，大意是说乐嘉老师自己初恋的时候，有一个姑娘很爱他，那时候乐嘉人又穷，又桀骜，又倔又愤，就觉得你爱我你就应该怎样怎样的证明，最后有一天，姑娘终于跑掉了，确实跟了个有钱人，于是乐嘉就又觉得姑娘是因为嫌贫爱富，着实的去跟姑娘纠缠闹腾了一阵子。</p>
        <span>作者：文by林夕</span>
        <hr/>
    </div>
    <div class="conter">
        <h1>一个人的牛肉可能是另一个人的草</h1>
        <p>非诚勿扰里乐嘉老师曾发过一段微博，大意是说乐嘉老师自己初恋的时候，有一个姑娘很爱他，那时候乐嘉人又穷，又桀骜，又倔又愤，就觉得你爱我你就应该怎样怎样的证明，最后有一天，姑娘终于跑掉了，确实跟了个有钱人，于是乐嘉就又觉得姑娘是因为嫌贫爱富，着实的去跟姑娘纠缠闹腾了一阵子。</p>
        <span>作者：文by林夕</span>
        <hr/>
    </div>
    <div class="main clearfix">
        <span>好文章→→</span>
    </div>
        <hr></hr>
    <div class="footer">
            <img src="image/1.jpg"/>
            <img src="image/2.jpg"/>
            <img src="image/3.jpg"/>
            <p>2017版权部分，请勿侵权</p>
    </div>
</body>
</html>△